<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 当前样式 -->
    <link rel="stylesheet" href="../css/index.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/slider.css">
    <!-- 引入jQuery -->
    <script src="../lib/jquery.min.js"></script>
    <!-- 引入js插件 -->
    <script src="../lib/jquery.slidebox.js"></script>
    <script src="../lib/slide.fn.js"></script>
    <!-- 引入无缝轮播插件 -->
    <script src="../lib/super_slider.js"></script>
 
    <!-- 引入当前js -->
    <script src="../js/index.js"></script>
</head>

<body style="padding-bottom:200px">
    <!-- 头部 -->
    <div class="head ">
        <div class="container-fluid bgc00">
            <div class="head-top container clearfix">
                <p class="text-left">乐购www.legou.com</p>
                <p class="text-mid">欢迎光临乐购 请
                    <a href="../html/login.html">登录</a>
                    <span>|</span>
                    <a href="../html/register.html">注册</a>
                </p>

            </div>
        </div>
        <div class="head-nav container">
            <div class="logo">
                <img src="../images/logo_00.png" alt="">
            </div>
            <form class="search">
                <input class="input1" type="text" placeholder="请输入搜索的商品名">
                <input class="input2" type="submit" value="">
                <img src="../images/搜索.png" alt="">
            </form>
            <div class="shop">
                <img src="../images/购物车.png" alt="">
                <span><a href="../html/carts.html">购物车</a></span>
                <div class="yuan">0</div>
            </div>
            <div class="mine"><a href="#">我的订单</a></div>

            <ul class="text clearfix">
                <li><a class="on" href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="../html/product.html">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方转产</a> </li>
                <li><a href="#">海外购</a></li>
                <li><a href="../html/details.html">电器城</a></li>
            </ul>

        </div>


    </div>

    <!-- 广告图 -->
    <div class="banner">
        <div class="hostpic container">
            <div class="pptbox fl" id="slider">
                <ul class="innerwrapper">
                    <li>
                        <a href="#">
                            <img src="../images/banner1.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner2.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner3.jpg" />
                        </a>
                    </li>
                   
                </ul>
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                   
                </ul>
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>


            
            <!--菜单 -->
            <div class="menu">
                <ul>
                    <script>
                        for(let i=0;i<=11;i++){
                            document.write(`<li>
                <p><a href="#">图书</a>、<a href="#">电子书</a>、<a href="#">童书</a></p>
                <div>
                  <p><a href="#">图书馆>></a> <a href="#">儿童书馆>></a> <a href="#">电子书馆>></a></p>
                  <dl >
                    <dt>文艺</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>人文社科</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>管理</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>励志</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>教育</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>科技</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    <dt>生活</dt>
                    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>

                    
                  </dl>
                </div>
              </li>`
              
              )
                   
            }
            </script>
                </ul>
               
            </div>
        </div>




    </div>

    <!-- 四张图 -->
    <div class="morepic container">
            <ul class="clearfix">
                <li><img src="../images/1.jpg" alt=""></li>
                <li><img src="../images/2.jpg" alt=""></li>
                <li><img src="../images/3.jpg" alt=""></li>
                <li><img src="../images/4.jpg" alt=""></li>
            </ul>
    
        </div>
   

    <!-- 横幅 -->
    <div class="hengfu container">
           <img src="../images/hengfu.png" alt="">
        </div>
   
    <!-- 倒计时  无缝轮播-->
    <div class="time container clearfix">
           <div class="countdown fl" id="today">
               
               <p class="text fcff fs24">乐购.元旦秒杀</p>
               <p><img src="../images/闪电.png" alt=""></p>
               <p class="timeCount fcff">倒计时</p>
               <span class="text-two fcff"></span>
               
    
           </div>
           <div class="Carousel fr">
            <div class="box">
                <span class="prev"><img src="../images/left1.png" alt=""></span>
                <div>
                <dl id="roll">
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                    <dd><img src="../images/音响.jpg"/></dd>
                   
                    
                </dl>
                </div>
                <span class="next"><img src="../images/left2.png" alt=""></span>
            </div>	
    
    
    
           </div>
    
        </div>
   

    <!-- 每日好货推荐 -->
    <div class="everyday container floor-box">
        <p class="txt"><img src="../images/sprite.png" alt="">
            <span class="goodday fs24">每日好货推荐</span>
        </p>

        <div class="banner-mid container clearfix">
              <div class="banner-left fl">
                  <img src="../images/03.jpg" alt="">
              </div>
              <div class="banner-right fr">
                  <img src="../images/04.jpg" alt="">
              </div>
        </div>

    </div>
    <!-- 大盒子 -->
    <div class="big-box container-fluid bgcf4" style="height: 3140px;">

        <!--服装配饰  -->
        <div class="clothes container floor-box">
            <div class="clo-title fs20">服装配饰</div>
            <ul class="hot-text">
                <li><a href="#">童装</a></li>
                <li><a href="#">精品男装</a></li>
                <li><a class="active" href="#">热销内衣</a></li>
            </ul>
            <div class="clo-mid container">
                <div class="mid-left fl">
                     <img src="../images/huangjin2.jpg" alt="">
                     <ul >
                         <li><a href="#">女装</a></li>
                         <li><a href="#">内衣</a></li>
                         <li><a href="#">泳衣</a></li>
                         <li><a href="#">功能箱包</a></li>
                         <li><a href="#">户外运动</a></li>
                         <li><a href="#">男装</a></li>
                         <li><a href="#">女鞋</a></li>
                         <li><a href="#">男鞋</a></li>
                         <li><a href="#">全部分类</a></li>
                     </ul>
                     
                </div>
                <div class="mid-mid fl">
                      <div class="lunbo">
                        <div class="pptbox fl" id="sid">
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#">
                                        <img src="../images/timg.jpg" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../images/timg (1).jpg" />
                                    </a>
                                </li>
                               
                            </ul>
                            <ul class="controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                               
                            </ul>
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
            
                      </div>
                      <div class="lunbo-bottom">
                          <img src="../images/2_03.jpg" alt="">
                      </div>
                      
                </div>
                <div class="mid-right fl">
                    <ul>
                        <li><img src="../images/1_03.jpg" alt=""></li>
                        <li><img src="../images/1_05.jpg" alt=""></li>
                        <li><img src="../images/1_09.jpg" alt=""></li>
                        <li><img src="../images/1_10.jpg" alt=""></li>
                    </ul>
                </div>

                <div class="mid-bottom fl container">
                    <ul>
                        <li><img src="../images/3_03.jpg" alt=""></li>
                        <li><img src="../images/3_05.jpg" alt=""></li>
                        <li><img src="../images/3_07.jpg" alt=""></li>
                        <li><img src="../images/3_09.jpg" alt=""></li>
                        <li><img src="../images/3_11.jpg" alt=""></li>
                        <li><img src="../images/3_13.jpg" alt=""></li>
                        <li><img src="../images/3_15.jpg" alt=""></li>
                        <li><img src="../images/3_17.jpg" alt=""></li>
                        <li><img src="../images/3_19.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
            


        </div>
    
        <!-- 母婴童装  -->
        <div class="clothes container floor-box">
            <div class="child-title fs20">母婴童装</div>
            <ul class="hot-child">
                <li><a href="#">童装</a></li>
                <li><a href="#">精品男装</a></li>
                <li><a class="active" href="#">热销内衣</a></li>
            </ul>
            <div class="clo-mid container">
                <div class="mid-left fl">
                     <img src="../images/4_11.jpg" alt="">
                     <ul >
                         <li><a href="#">女装</a></li>
                         <li><a href="#">内衣</a></li>
                         <li><a href="#">泳衣</a></li>
                         <li><a href="#">功能箱包</a></li>
                         <li><a href="#">户外运动</a></li>
                         <li><a href="#">男装</a></li>
                         <li><a href="#">女鞋</a></li>
                         <li><a href="#">男鞋</a></li>
                         <li><a href="#">全部分类</a></li>
                     </ul>
                     
                </div>
                <div class="mid-mid fl">
                      <div class="lunbo">
                        <div class="pptbox fl" id="child">
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#">
                                        <img src="../images/timg.jpg" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../images/timg (1).jpg" />
                                    </a>
                                </li>
                               
                            </ul>
                            <ul class="controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                               
                            </ul>
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
            
                      </div>
                      <div class="lunbo-bottom">
                          <img src="../images/2_03.jpg" alt="">
                      </div>
                      
                </div>
                <div class="mid-right fl">
                    <ul>
                        <li><img src="../images/1_03.jpg" alt=""></li>
                        <li><img src="../images/1_05.jpg" alt=""></li>
                        <li><img src="../images/1_09.jpg" alt=""></li>
                        <li><img src="../images/1_10.jpg" alt=""></li>
                    </ul>
                </div>

                <div class="mid-bottom fl container">
                    <ul>
                        <li><img src="../images/3_03.jpg" alt=""></li>
                        <li><img src="../images/3_05.jpg" alt=""></li>
                        <li><img src="../images/3_07.jpg" alt=""></li>
                        <li><img src="../images/3_09.jpg" alt=""></li>
                        <li><img src="../images/3_11.jpg" alt=""></li>
                        <li><img src="../images/3_13.jpg" alt=""></li>
                        <li><img src="../images/3_15.jpg" alt=""></li>
                        <li><img src="../images/3_17.jpg" alt=""></li>
                        <li><img src="../images/3_19.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
            
        </div>
    
        <!-- 精致人生   -->
        <div class="clothes container floor-box">
            <div class="beauty-title fs20">精致人生</div>
            <ul class="hot-beauty">
                <li><a href="#">童装</a></li>
                <li><a href="#">精品男装</a></li>
                <li><a class="active" href="#">热销内衣</a></li>
            </ul>
            <div class="clo-mid container">
                <div class="mid-left fl">
                     <img src="../images/4_14.jpg" alt="">
                     <ul >
                         <li><a href="#">女装</a></li>
                         <li><a href="#">内衣</a></li>
                         <li><a href="#">泳衣</a></li>
                         <li><a href="#">功能箱包</a></li>
                         <li><a href="#">户外运动</a></li>
                         <li><a href="#">男装</a></li>
                         <li><a href="#">女鞋</a></li>
                         <li><a href="#">男鞋</a></li>
                         <li><a href="#">全部分类</a></li>
                     </ul>
                     
                </div>
                <div class="mid-mid fl">
                      <div class="lunbo">
                        <div class="pptbox fl" id="beauty">
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#">
                                        <img src="../images/timg.jpg" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../images/timg (1).jpg" />
                                    </a>
                                </li>
                               
                            </ul>
                            <ul class="controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                               
                            </ul>
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
            
                      </div>
                      <div class="lunbo-bottom">
                          <img src="../images/2_03.jpg" alt="">
                      </div>
                      
                </div>
                <div class="mid-right fl">
                    <ul>
                        <li><img src="../images/1_03.jpg" alt=""></li>
                        <li><img src="../images/1_05.jpg" alt=""></li>
                        <li><img src="../images/1_09.jpg" alt=""></li>
                        <li><img src="../images/1_10.jpg" alt=""></li>
                    </ul>
                </div>

                <div class="mid-bottom fl container">
                    <ul>
                        <li><img src="../images/3_03.jpg" alt=""></li>
                        <li><img src="../images/3_05.jpg" alt=""></li>
                        <li><img src="../images/3_07.jpg" alt=""></li>
                        <li><img src="../images/3_09.jpg" alt=""></li>
                        <li><img src="../images/3_11.jpg" alt=""></li>
                        <li><img src="../images/3_13.jpg" alt=""></li>
                        <li><img src="../images/3_15.jpg" alt=""></li>
                        <li><img src="../images/3_17.jpg" alt=""></li>
                        <li><img src="../images/3_19.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
            
        </div>
    
        <!-- 家居生活 -->
        <div class="clothes container floor-box">
            <div class="house-title fs20">家居生活</div>
            <ul class="hot-house">
                <li><a href="#">童装</a></li>
                <li><a href="#">精品男装</a></li>
                <li><a class="active" href="#">热销内衣</a></li>
            </ul>
            <div class="clo-mid container">
                <div class="mid-left fl">
                     <img src="../images/4_16.jpg" alt="">
                     <ul >
                         <li><a href="#">女装</a></li>
                         <li><a href="#">内衣</a></li>
                         <li><a href="#">泳衣</a></li>
                         <li><a href="#">功能箱包</a></li>
                         <li><a href="#">户外运动</a></li>
                         <li><a href="#">男装</a></li>
                         <li><a href="#">女鞋</a></li>
                         <li><a href="#">男鞋</a></li>
                         <li><a href="#">全部分类</a></li>
                     </ul>
                     
                </div>
                <div class="mid-mid fl">
                      <div class="lunbo">
                        <div class="pptbox fl" id="house">
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#">
                                        <img src="../images/timg.jpg" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../images/timg (1).jpg" />
                                    </a>
                                </li>
                               
                            </ul>
                            <ul class="controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                               
                            </ul>
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
            
                      </div>
                      <div class="lunbo-bottom">
                          <img src="../images/2_03.jpg" alt="">
                      </div>
                      
                </div>
                <div class="mid-right fl">
                    <ul>
                        <li><img src="../images/1_03.jpg" alt=""></li>
                        <li><img src="../images/1_05.jpg" alt=""></li>
                        <li><img src="../images/1_09.jpg" alt=""></li>
                        <li><img src="../images/1_10.jpg" alt=""></li>
                    </ul>
                </div>

                <div class="mid-bottom fl container">
                    <ul>
                        <li><img src="../images/3_03.jpg" alt=""></li>
                        <li><img src="../images/3_05.jpg" alt=""></li>
                        <li><img src="../images/3_07.jpg" alt=""></li>
                        <li><img src="../images/3_09.jpg" alt=""></li>
                        <li><img src="../images/3_11.jpg" alt=""></li>
                        <li><img src="../images/3_13.jpg" alt=""></li>
                        <li><img src="../images/3_15.jpg" alt=""></li>
                        <li><img src="../images/3_17.jpg" alt=""></li>
                        <li><img src="../images/3_19.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
            
        </div>

        <!-- 楼层 -->
        <div class="floor">
            <ul>
                <li class="icon1" data-bgc="skyblue">每日推荐</li>
                <li class="icon2" data-bgc="#feb80f">服装配饰</li>
                <li class="icon3" data-bgc="#7a45e5">母婴童装</li>
                <li class="icon4" data-bgc="#f770cf">精致人生</li>
                <li class="icon5" data-bgc="#00b262">家居生活</li>
            </ul>
        </div>

        <!-- 固定顶部搜索框 -->
        <div class="head-box"></div>

         <!-- 回到顶部 -->
        <div class="return">
            <img src="../images/gototop_05.jpg" alt="">
        </div>
    

        <!-- 尾部 -->
        <div class="footer container-fluid ">
             <div class="foot-top container">
               <div class="foot-pic">
                   <ul>
                       <li><img class="fl mr" src="../images/正品保障.jpg" alt="">
                         <p class="fs20 c33 pb10 fw">正品保障</p>
                         <p>正品行货 放心选购</p>
                        </li>
                       <li><img class="fl mr" src="../images/包邮.jpg" alt="">
                        <p class="fs20 c33 pb10 fw">满86包邮</p>
                         <p>满86元 免运费</p>
                      </li>
                       <li><img class="fl mr" src="../images/售后无忧.jpg" alt="">
                        <p class="fs20 c33 pb10 fw">售后无忧</p>
                         <p>7天无理由退货</p>
                      </li>
                       <li><img class="fl mr" src="../images/准时.jpg" alt="">
                        <p class="fs20 c33 pb10 fw">准时送达</p>
                        <p>收获时间由你做主</p>
                    </li>
                   </ul>
               </div>
               <div class="foot-bottom ">
                   <div>
                       <ul class="one">
                           <li><a class="fs18 fw" href="#">新手入门</a></li>
                           <li><a href="#">购物流程</a></li>
                           <li><a href="#">会员制度</a></li>
                           <li><a href="#">订单查询</a></li>
                           <li><a href="#">服务协议及隐私说明</a></li>
                           <li><a href="#">网站地图</a></li>
                       </ul>
                   </div>

                   <div>
                       <ul class="two">
                        <li><a class="fs18 fw" href="#">支付方式</a></li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">网上支付</a></li>
                        <li><a href="#">礼品卡支付</a></li>
                        <li><a href="#">其他支付</a></li>
                       </ul>
                   </div>
                   <div>
                    <ul class="three">
                     <li><a class="fs18 fw" href="#">配送服务</a></li>
                     <li><a href="#">配送进度查询</a></li>
                     <li><a href="#">商品验货与签收</a></li>
                     
                    </ul>
                </div>
                <div>
                    <ul class="four">
                     <li><a class="fs18 fw" href="#">相关规则</a></li>
                     <li><a href="#">平台规则</a></li>
                     <li><a href="#">退换货政策</a></li>
                     <li><a href="#">发票制度</a></li>
                     <li><a href="#">帮助中心</a></li>
                     
                    </ul>
                </div>

                <div>
                    <ul class="five">
                     <li><a class=" fw" href="#">App更优惠</a></li>
                     <li><img src="../images/二维码.png" alt=""></li>
                    </ul>
                </div>
                <div>
                    <ul class="six">
                     <li><a class=" fw" href="#">加微信查订单</a></li>
                     <li><img src="../images/二维码.png" alt=""></li>
                    </ul>
                </div>

               </div>

             </div>
             <div class="footer-bottom container">
                 <p>沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX | 
                    沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
             </div>
             <div class="footer-pic container">
                 <ul >
                     <li><img src="../images/footer-1.jpg" alt=""></li>
                     <li><img src="../images/footer-2.jpg" alt=""></li>
                     <li><img src="../images/footer-3.jpg" alt=""></li>
                     <li><img src="../images/footer-4.png" alt=""></li>
                     <li><img src="../images/footer-5.png" alt=""></li>
                     <li><img src="../images/footer-6.jpg" alt=""></li>
                 </ul>
             </div>


     </div>

        



    </div>




    
</body>

</html>